<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
{block name="meta"}
<title>test</title>
<link rel="stylesheet" href="__CSS__ava-test.css">
{/block}
    <style>
    .am-g{ padding-bottom: 40px; }
    .am-g>div{ overflow-x:scroll; }
    .am-dropdown-content{margin-top:0 !important;top:30px;}
    footer.am-footer{ width: 100%;text-align: center;position: fixed;bottom: 0;background-color: rgba(255,255,255,0);z-index: -1; }
    </style>
    <!-- amazeui css body:relative : bug -->
	<link rel="stylesheet" href="__CDN__amazeui/2.6.2/css/amazeui.css">
	<script src="__CDN__amazeui/2.6.2/js/jquery.min.js"></script>
	<script src="__CDN__amazeui/2.6.2/js/amazeui.min.js"></script>
	<script src="__CDN__avalon.js/2.1.14/avalon.modern.js"></script>
{block name="head"}
{/block}

</head>
<body id="style-5">
{include file="template/header"}

{block name="body"}
<div class="title"><h1>BOYE测试<span>{$type?:'NO_API'}</span></h1></div>
<div class="am-g"  ms-controller="test">

    <div class="am-u-sm-5">
        <label>操作参数 【无key添加；有key修改,无value删除】</label>
        <div class="am-form-inline">
          <div class="am-form-group">
            <input type="text" class="am-form-field" id="key"  ms-duplex="@inp[0] | change" placeholder="参数名">
          </div>
          <div class="am-form-group">
            <input type="text" class="am-form-field" id="val" ms-on-keydown="@add | enter" ms-duplex="@inp[1]" placeholder="参数值">
          </div>
          <button class="am-btn" ms-click="@add">确定</button>
          <div class="am-form-group am-padding">[[@msg]]</div>
        </div>
        <button class="am-btn am-btn-primary" ms-click="@sub">启动</button>
        <button class="am-btn am-btn-primary" ms-click="@ret">重置</button>
        <p></p>
        <table class="am-table am-table-hover am-table-bordered am-table-radius">
            <thead><tr><th>参数名</th><th>参数值</th><th>参数说明[**为必选]</th></tr></thead>
            <tbody>
            <tr ms-for="(k,v) in @param" ms-click="@cha($event,k)">
                <td ms-for="e in v" ms-html="e | sanitize"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="am-u-sm-7">
        <label>请求结果</label>
        <!-- <p ms-html="@htm | sanitize">view bug</p> -->
        <block id="htm"></block>
    </div>
</div>
{/block}

{include file="template/footer"}
<script>
var s ; //global var ,test only
var reg = /^\w+(\[(\w+)?\])?$/;
var logs = {$logs?'true':'false'};//日志开关
var progress = $.AMUI.progress;
function log(){
    if(logs){
    if(arguments.length == 1) console.log(arguments[0]);
    else if(arguments.length == 2) console.log(arguments[0],arguments[1]);
    else if(arguments.length == 3) console.log(arguments[0],arguments[1],arguments[2]);
    else console.log(arguments);
    }
};
function outtime(t){
  if(!t) t = 1000; //fix qq browser bug
  // setTimeout(function(){
  //     //超时
  //     progress.done();
  // },t);
}
function handlepost(data){
    var type;
    log('post-return-data:',data);
    type = data.toString();
    if(type == "[object Object]"){
        //json
        data = "<pre>" + JSON.stringify(data,null,"  ") + "</pre>";
    }else if(type == "[object XMLDocument]"){
        //xml
        data = "<pre>" + "xml-format-not-ready-yet" + "</pre>";
    }else{
        //array string
        data = data.replace(/=&amp;gt;/g,'=>');
        data = data.replace(/&lt;pre&gt;/g,'\n&lt;pre&gt;\n');
        if (data.indexOf("<!DOCTYPE html>")>0){
            vm.msg = '系统错误';
            // $('#err-modal .am-modal-bd').html(data);
            // $('#err-modal').modal('open');
        }else{
            vm.msg = 'OK !';
        }
    }
    // vm.htm = data; //view bug
    $('#htm').html(data);
    progress.done();
}
$(function(){  $('#key').focus(); })
//avalon setting
avalon.config({ interpolate:["[[","]]"],debug:logs });
</script>
{block name="foot"}

<script>
//set viewModel
var vm = avalon.define({
 $id: "test",
 htm:'',
 inp:['','',''],
 state:'',
 param: [
    {foreach $field as $v}
    ['{$v[0]}','{$v[1]}','{$v[2]}'],
    {/foreach}
 ],
 msg:"相安无事",
 reparam: [
    {foreach $field as $v}
    ['{$v[0]}','{$v[1]}','{$v[2]}'],
    {/foreach}
 ],
 ret:function(){
    vm.param = vm.reparam;
    vm.msg   = '勿忘初心，回归本源';
 },
 add:function(){
    var len = vm.param.length;
    var inp = vm.inp;
    if(!inp[0]){ vm.msg = '无效操作';return; }else{
        log('fun-add:',inp.$model);
        $('#key').focus();
        for (var i = 0; i < len; i++) {
            if(vm.param[i][0]==inp[0]){
                if(inp[1].length){
                    if(inp[1]!=vm.param[i][1]){
                        vm.msg = '修改参数:'+inp[0]+'='+inp[1];
                        vm.param[i].set(1,inp[1],vm.param[i][2]);
                    }else{ vm.msg = '无用操作'; }
                    $('tbody>tr').stop().removeClass().eq(i).addClass('am-primary');
                }else{
                    vm.msg = '删除参数:'+inp[0];
                    vm.param.splice(i,1);
                }
                vm.inp = ['','',''];
                return;
            }
        };
        if(!inp[1]){ vm.msg = '无效操作';return; }
        vm.msg = '添加参数:'+inp[0]+'='+inp[1];
        vm.param.push([inp[0],inp[1],'']);
        vm.inp = ['','',''];
        //等待vm-ready
        setTimeout(function(){$('tbody>tr').stop().removeClass().last().addClass('am-primary');},200);
        return;
    }
 },
 sub:function(){
    progress.start();
    var param = vm.param.$model,dat={};
    var len  = param.length;
    var p,k,i1,i2,k1,k2;
    for (var i = 0; i < len; i++) {
        k = param[i][0];
        if(k.search(reg)<0) alert('参数名格式错误');
        // 暂时后端处理数组
        i1 = k.search(/\[/);
        if(i1>0){
          //数组
          i2=k.search(/\]/);
          k1=k.slice(0,i1); //key
          k2=k.slice(i1+1,i2); //value
          if(k2 == ''){
            if(dat[k1] instanceof Array){ }else{
              dat[k1] = [];
            }
            dat[k1].push(param[i][1]);
          }else{
            if(dat[k1] instanceof Object){ }else{
              dat[k1] = { };
            }
            dat[k1][k2] = param[i][1];
          }
        }else{
          //字符串
          dat[k] = param[i][1];
        }
    };
    for(i in dat){
        p = dat[i];
        if(p instanceof Object){
            dat[i] = JSON.stringify(p);
        }
    }
    log('vm-sub===',dat);
    vm.msg = '提交请求';
    $.post('',dat,function(data) { //{ data:JSON.stringify(dat) }
        s = data;
        handlepost(data);
    });
    outtime();
 },
 cha:function(e,k){
    log('vm-cha',k,e);
    var dat = vm.param[k];
    vm.msg = '准备操作: '+dat[0];
    vm.inp = [];
    $('tbody>tr').stop().removeClass().eq(k).addClass('am-primary');
    vm.inp.pushArray([dat[0],dat[1]]);
    $('#val').focus();
 },
});
// avalon.scan();
$(function(){
    var timer,delay=200;
    $('.am-dropdown').hover(function(){
        clearTimeout(timer);
        $this = $(this);
        timer = setTimeout(function(){
            $this.dropdown('open'); // 延时打开单个
        },delay);

    },function(){
        clearTimeout(timer);
        $('.am-dropdown').dropdown('close'); // 关闭所有
    })
})

</script>
{/block}
</body>
</html>